<template>
    <h1>监听ref的多个属性</h1>
    <div>
        姓名: <input type="text" v-model="person.name"><br>
        年龄：<input type="text" v-model="person.age"><br>
        职业:<input type="text" v-model="person.job"><br>
    </div>
</template>

<script>
/* 
    watch监听reactive类型的响应式数据
    deep这个选项是无效的
    如果新数据将旧数据给覆盖了，解决的办法，让其监听计算属性
*/
import { reactive } from '@vue/reactivity'
import { computed, watch } from '@vue/runtime-core'
export default {
 setup(){
   const person=reactive({
        name:'Giles',
        age:33,
        job:'teacher'
   })
  
   const newPerson=computed(()=>{
    return JSON.parse(JSON.stringify(person))
   })
    watch(newPerson,(newval,oldval)=>{
    console.log(newval,oldval);
   },{
    immediate:true,
    deep:false
   })
   return{
    person,newPerson
   }
 }
}
</script>

<style>

</style>